﻿<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>WMS系统CPU状态(今日)</title>
   
       <!-- bootstrap 3.0.2 -->
        <link href="v2/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
       
        <!-- font Awesome -->
        <link href="v2/css/font-awesome.min.css" rel="stylesheet" type="text/css" />

		<!-- jQuery 2.0.0 -->
		<script src="v2/js/jquery-2.0.0.min.js"></script>
	
        <!-- Bootstrap -->
        <script src="v2/js/bootstrap.min.js" type="text/javascript"></script>
        
        <!-- date picker -->
        <script src="v2/js/plugins/datepicker/bootstrap-datepicker.min.js" type="text/javascript"></script>
        <link href="v2/js/plugins/datepicker/datepicker3.css" type="text/css" rel="stylesheet" />
        <script charset="UTF-8" src="v2/js/plugins/datepicker/bootstrap-datepicker.zh-CN.js" ></script>


  <script type="text/javascript">

     $(function() {

            $("#ss1").datepicker({
            language: "zh-CN",
			format : 'yyyy-mm-dd',

		    }); 
   
		   
     });          
</script>


 
</head>
<body>

 <div class="row margin-top-20">  
<div class="col-sm-3">
  <div class="input-textgroup col-sm-12 ">
   <span class="input-group-text"> 选择日期： </span>
    <div class="input-group">
                                            <div class="input-group-addon">
                                                <i class="fa fa-calendar"></i>
                                            </div>
                                            <input type="text" class="form-control pull-right" id="ss1"/>
                                              
                                        </div>
  </div>
</div>
</div>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
     <div id="main" style="height:400px"></div>
    <!-- ECharts单文件引入 -->
    <script src="http://oms.wpaisong.com:8080/ex-oms/js/echarts.js"></script>
    <script src="http://oms.wpaisong.com:8080/ex-oms/js/jquery-1.7.2.min.js"></script>

    <script type="text/javascript">
function CurentDate()
    { 
        var now = new Date();
       
        var year = now.getFullYear();       //年
        var month = now.getMonth() + 1;     //月
        var day = now.getDate();            //日
       
      
        var clock = year + "-";
       
        if(month < 10)
            clock += "0";
       
        clock += month + "-";
       
        if(day < 10)
            clock += "0";
           
        clock += day ;
  
        return(clock); 
    }    
function CurentTime()
    { 
        var now = new Date();
       
        var year = now.getFullYear();       //年
        var month = now.getMonth() + 1;     //月
        var day = now.getDate();            //日
       
        var hh = now.getHours();            //时
        var mm = now.getMinutes();          //分
       
        var clock = year + "-";
       
        if(month < 10)
            clock += "0";
       
        clock += month + "-";
       
        if(day < 10)
            clock += "0";
           
        clock += day + " ";
       
        if(hh < 10)
            clock += "0";
           
        clock += hh + ":";
        if (mm < 10) clock += '0'; 
        clock += mm; 
        return(clock); 
    }    
    function GetRequest() { 
	var url = location.search; //获取url中"?"符后的字串 
	var theRequest = new Object(); 
	if (url.indexOf("?") != -1) { 
	var str = url.substr(1); 
	strs = str.split("&"); 
	for(var i = 0; i < strs.length; i ++) { 
	theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]); 
	} 
	} 
	return theRequest; 
    } 
        // 路径配置
        require.config({
            paths: {
                echarts: 'http://oms.wpaisong.com:8080/ex-oms/js'
            }
        });
        
        // 使用
        require(
            [
                'echarts',
                'echarts/chart/line', // 使用柱状图就加载bar模块，按需加载
                'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
            ],
            function (ec) {
            	var url = window.location.href;
            	var date = GetRequest()["Date"];
            	if(!date ||date.trim() == "")date =CurentDate();
            	var mid = GetRequest()["mid"];
            	if(!mid ||mid.trim() == "")mid ="CPU";
            	var sUrl = "./get"+mid+"_"+date+".json";
            	//alert(sUrl);
            	$.ajax({
    type: "POST",
    url: sUrl,
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    data: "{Date: '" + date + "'}",
    success: function(data) {
if(data){
		// 基于准备好的dom，初始化echarts图表
        	            var myChart = ec.init(document.getElementById('main')); 
        				var option = {
        	            	    title : {
        	            	        text: 'WMS机器CPU占用率',
        	            	    },
        	            	    tooltip : {
        	            	        trigger: 'axis'
        	            	    },
        	            	    legend: {
        	            	        data:['CPU','CPU0','CPU1','CPU2','CPU3']	
        	            	    },
        	            	    toolbox: {
        	            	        show : true,
        	            	        feature : {
        	            	            mark : {show: true},
        	            	            dataView : {show: true, readOnly: false},
        	            	            magicType : {show: true, type: ['line', 'bar']},
        	            	            restore : {show: true},
        	            	            saveAsImage : {show: true}
        	            	        }
        	            	    },
        	            	    calculable : true,
        	            	    xAxis : [
        	            	        {
        	            	            type : 'category',
        	            	            boundaryGap : false,
        	            	            data : ['周一','周二','周三','周四','周五','周六','周日']
        	            	        }
        	            	    ],
        	            	    yAxis : [
        	            	        {
        	            	           max:100,
        	            	            type : 'value',
        	            	            axisLabel : {
        	            	                formatter: '{value} '
        	            	            }
        	            	        }
        	            	    ],
        	            	    series : [
        	            	        {
        	            	            name:'CPU',
        	            	            type:'line',
        	            	            data:[11, 11, 15, 13, 12, 13, 10]
        	            	        },
        	            	        {
        	            	            name:'CPU0',
        	            	            type:'line',
        	            	            data:[1, -2, 2, 5, 3, 2, 0]
        	            	        },
        	            	        {
        	            	            name:'CPU1',
        	            	            type:'line',
        	            	            data:[1, -2, 2, 5, 3, 2, 0]
        	            	        },
        	            	        {
        	            	            name:'CPU2',
        	            	            type:'line',
        	            	            data:[1, -2, 2, 5, 3, 2, 0]
        	            	        },
        	            	        {
        	            	            name:'CPU3',
        	            	            type:'line',
        	            	            data:[1, -2, 2, 5, 3, 2, 0]
        	            	        }
        	            	    ]
        	            	};
        
        					var series = new Array();
        					
        					for(var i=1;i<data.names.length;i++){
  						var serie = new Object();

						serie.name=data.names[i];
            	            					serie.type='line';
            	            					serie.data=data.datas[i];
  						series.push(serie);		
        					}
        					option.xAxis[0].data = data.datas[0];
        					option.series = series;
					data.names.shift();
        					option.legend.data = data.names;
        					option.title.text = date+"日"+data.title;
        					myChart.setOption(option); 
        			} else {
        			
        				alert("data error .");
        			}
    },
    error: function (XMLHttpRequest, textStatus, errorThrown) {
       
    }
});

            }
        );
        
    // 为echarts对象加载数据         
    </script>
    
   
    
   
</body>